<template>
	<view class="login-page">
		<view class="" style="height: 80rpx;line-height: 80rpx;">
			<uni-icons type="left" size="30" @click="goBack"></uni-icons>
		</view>
		<view class="login-bg">
			<view class="mini-title">省心智生活</view>
			<view class="code-login">验证码登录</view>
			<view class="code-line"></view>
		</view>
		<view class="login-contaier">
			<uni-forms class="forms-item" :model="form">
				<uni-forms-item>
					<view class="phone-con">
						<view class="icon">
							<image
								src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/password.png"
								mode="widthFix" style="width: 48rpx"></image>
						</view>
						<view class="up-line"></view>
						<input maxlength="11" placeholder="请输入手机号" type="number" v-model="form.mobile"
							class="uni-input-input" placeholder-style="color: #969696;font-size:40rpx" />
					</view>
				</uni-forms-item>
				<uni-forms-item>
					<view class="code-con">
						<view class="icon">
							<image
								src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/phone.png"
								mode="widthFix" style="width: 48rpx"></image>
						</view>
						<view class="up-line"></view>
						<input maxlength="6" placeholder="请输入验证码" type="number" v-model="form.verificationCode"
							class="uni-input-input" placeholder-style="color: #969696;font-size:40rpx" />
						<view class="code-btn" @click="sendCode" :style="{ cursor: isSend ? 'not-allowed' : '' }">
							<view class="" v-if="!isSend">获取验证码</view>
							<!-- 12s获取验证码 -->
							<view class="" v-else>
								<text style="color: #4883ff">{{ isNum }}s</text>
								<text>后重新发送</text>
							</view>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>

			<view class="privacy-policy">
				<checkbox-group @change="changeAll">
					<label>
						<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
						<text style="color: #747474; font-weight: 400; font-size: 24rpx">已阅读并同意</text>
					</label>
				</checkbox-group>
				<text style="color: #4883ff; font-weight: 600; font-size: 24rpx"
					@click="privatePro(1)">《个人信息授权及保护声明》</text>
			</view>
			<view class="login-btn-image" @click="submit">
				<image src="https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/loginBtn.png"
					style="width: 600rpx;" mode="widthFix"></image>
			</view>
		</view>
		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		storeToRefs
	} from 'pinia';
	import initApi from '@/apis/init.js';
	import {
		useUserStore
	} from '@/store/user.js';
	const isTimer = ref();
	const isNum = ref(0);
	const isSend = ref(false);
	const allChecked = ref(false);
	const agreeType = ref(1);
	const popupOk = ref();

	const {
		userInfo,
		token
	} = storeToRefs(useUserStore());

	const form = reactive({
		mobile: '',
		verificationCode: ''
	});
	const productType = ref()
	const goBack = () => {
	uni.navigateBack()
	}
	onLoad((query) => {
		// 接受参数 传递
		if (query.productType) {
			productType.value = query.productType
		} else {
			productType.value = ''
		}
	})
	const sendCode = async () => {
		if (!form.mobile) return uni.utils.toast('请输入手机号！');
		if (isSend.value) return;
		const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(form.mobile);
		if (!isOkMobile) return uni.utils.toast('请输入正确的手机号');

		initApi
			.authSendSms({
				mobile: form.mobile
			})
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					uni.utils.toast('发送成功');
					isNum.value = 60;
					isSend.value = true;
					isTimer.value = setInterval(() => {
						if (isNum.value <= 0) {
							clearInterval(isTimer.value);
							isNum.value = 0;
							isSend.value = false;
						}
						isNum.value--;
					}, 1000);
				} else {
					return uni.utils.toast(res.message);
				}
			})
			.catch((err) => {
				console.log(err);
			});
	};
	const ok1 = () => {
		popupOk.value.close();
		allChecked.value = true;
	};
	const privatePro = (type) => {
		agreeType.value = type;
		popupOk.value.open('center');
	};
	// 同意协议
	const changeAll = (val) => {
		if (val.detail.value.length > 0) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	};
	const loginH5 = () => {};
	// 登录
	const submit = async () => {
		if (!allChecked.value) return uni.utils.toast('请勾选《 个人信息授权及保护声明 》');
		if (!form.verificationCode) return uni.utils.toast('请输入验证码');
		const loginRes = await initApi.authRegisterAndLogin({
			mobile: form.mobile,
			verificationCode: form.verificationCode
		});
		if (loginRes.code == 20000) {
			uni.setStorageSync('token', loginRes.data.accessToken);
			token.value = loginRes.data.accessToken;
			userInfo.value.token = loginRes.data.accessToken;
			userInfo.value.mobile = loginRes.data.username;
			userInfo.value.info = loginRes.data;
			// 这个地方是怎么玩的 
			uni.navigateTo({
				url: `/pages/lhhy/equity?productType=${productType.value?productType.value:''}`, // 参数怎么完

			})
		} else {
			return uni.utils.toast(loginRes.message);
		}
	};
</script>

<style lang="scss" scoped>
	:deep(.uni-forms-item) {
		height: 112rpx;
		background-color: #ffffff;
		border-radius: 100rpx;
		box-sizing: border-box;

		.code-con {
			display: flex;
			height: 112rpx;

			.icon {
				height: 112rpx;
				padding-top: 33rpx;
				box-sizing: border-box;
				padding-left: 34rpx;
			}

			.up-line {
				width: 2rpx;
				height: 40rpx;
				background-color: #d9d9d9;
				margin-top: 36rpx;
				margin-left: 10rpx;
				margin-right: 28rpx;
			}

			.uni-input-input {
				width: 270rpx;
				height: 112rpx;
				font-size: 36rpx;
				background-color: transparent !important;
			}

			.code-btn {
				height: 112rpx;
				line-height: 112rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #b4b4b4;
			}
		}

		.phone-con {
			display: flex;
			height: 112rpx;

			.icon {
				height: 112rpx;
				padding-top: 33rpx;
				box-sizing: border-box;
				padding-left: 34rpx;
			}

			.up-line {
				width: 2rpx;
				height: 40rpx;
				background-color: #d9d9d9;
				margin-top: 36rpx;
				margin-left: 10rpx;
				margin-right: 28rpx;
			}

			.uni-input-input {
				width: 450rpx;
				height: 112rpx;
				font-size: 36rpx;
				background-color: transparent !important;
			}
		}
	}

	.login-contaier {
		height: 700rpx;
		width: 600rpx;
		margin: 0 auto;

		.login-btn-image {
			margin-top: 96rpx;
		}

		.privacy-policy {
			margin-top: 20rpx;
			display: flex;
			height: 50rpx;
			align-items: center;
		}
	}

	.login-page {
		width: 750rpx;
		margin: 0 auto;
		height: 438rpx;
		background-image: url(https://qb-bee-front-dev-1308147483.cos.ap-chengdu.myqcloud.com/sxzz/login/headerBg.png);
		background-size: cover;
		background-repeat: no-repeat;
		box-sizing: border-box;

		// background-color: blue;
		.mini-title {
			font-family: Noto Sans Gujarati UI, Noto Sans Gujarati UI;
			font-weight: 400;
			font-size: 40rpx;
			color: #000000;
			padding-left: 70rpx;
			padding-top: 234rpx;
		}

		.code-login {
			font-weight: 400;
			font-size: 32rpx;
			color: #000000;
			padding-left: 70rpx;
			padding-top: 132rpx;
			// background-color: red;
		}

		.code-line {
			margin-bottom: 72rpx;
			margin-left: 96rpx;
			margin-top: 4rpx;
			width: 112rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #3b9af8 0%, #3cd9bb 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
</style>
<style>
	page {
		background-color: #edf4ff !important;
		height: 100% !important;
	}
</style>